<template>
  <el-dialog :visible.sync="visible" custom-class="dialog_big" >
    <div slot="title" class="flex_row-jcsb">
      <slot name="title">
        <span class="el-dialog__title">{{ title }}</span>
      </slot>
      <!-- <el-button style="margin-right:40px"><i class="el-icon-printer el-icon--left"></i>{{$tt('label_print')}}</el-button> -->
    </div>
    <div v-loading="loading">
      <ex_super_desc ref="MainDesc" v-bind="Object.assign({}, descAttrs, descOption)" :data="descData" v-if="descOption">
        <template v-slot:[item.slot] v-for="item in descOption.model">
          <slot :name="item.slot" :item="descData[item.key]"></slot>
        </template>
      </ex_super_desc>
      <ex_super_table ref="MainTable" v-bind="tableOption" :data="tableData" v-if="tableOption" >
        <template v-slot:[item.slot]="scope" v-for="item in tableOption.model">
          <slot :name="item.slot" v-bind="scope"></slot>
        </template>
      </ex_super_table>
      <ex_super_table  v-bind="tableExtraOption" :data="tableExtraData" v-if="tableExtraOption" >
        <template v-slot:[item.slot]="scope" v-for="item in tableExtraOption.model">
          <slot :name="item.slot" v-bind="scope"></slot>
        </template>
      </ex_super_table>
    </div>
</el-dialog>
</template>

<script>

export default {
  name: 'DetailDescTable',
  data() {
    return {
      visible: false,
      descAttrs: {
        size: 'small',
        column: 4,
      },
      descData: {},
      tableData: [],
      tableExtraData:[],
      loading: false,
      params: "",
    }
  },
  props: {
    descOption: Object,
    tableOption: Object,
    tableExtraOption: Object,
    title: String,
    url: String,
    urlDataHandle: Function,
  },

  computed: {

  },
  methods: {
    show({ params, descData, tableData, forceLoad }) {

      this.visible = true
      this.params = params
      // if (!forceLoad&&JSON.stringify(params) == this.params) return
      this.$nextTick(() => {
        if (descData) this.descData = descData
        if (tableData) this.tableData = tableData
        this.loadData(params)
      })
    },

    loadData(params) {
      if (!params) params = this.params
      this.loading = true
      this.$ajax({
        url: this.url,
        method: 'post',
        data: params,
        success: (responseData) => {
          this.params = JSON.stringify(params)
          let data = this.urlDataHandle ? this.urlDataHandle(responseData) : {}

          if (data.descData) this.descData = data.descData
          if (data.tableData) this.tableData = data.tableData
          if (data.tableExtraData) this.tableExtraData = data.tableExtraData
          
        },
        complete: () => {
          this.loading = false
        }
      })
    },
    hide() {
      this.visible = false
    },

  }
}
</script>
